<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue';
import { Plus as AppNutIconPlus, Del2 as AppNutIconDel2 } from '@nutui/icons-vue-taro';
import { eventCenter, getCurrentInstance } from '@tarojs/taro';
import COPY from '/@/assets/image/icon/copy.png';

const props = defineProps<{
  /**
   *item的标题
   */
  title: string;
  /**
   * button伤的标题
   */
  buttonTitle: string;
  productList?: FlowPathDraftApi.Product[];
}>();
const state = reactive<{
  list: any[];
}>({
  list: [],
});
let titleIndex = 0;
watch(
  () => props.productList,
  () => {
    props.productList?.forEach((item) => addItemByDraft(item));
  },
);
/**
 * 删除item
 */
function deleteItem(id: string) {
  const index = state.list.findIndex((item) => item.id === id);
  state.list.splice(index, 1);
  if (state.list.length === 1) {
    state.list[0].deletable = false;
  }
}

/**
 * 添加item
 */
function addItem() {
  titleIndex++;
  state.list.push({
    id: titleIndex.toString(),
    deletable: true,
    title: props.title + titleIndex,
  });
  if (state.list.length === 1) {
    state.list[0].deletable = false;
  } else {
    if (!state.list[0].deletable) {
      state.list[0].deletable = true;
    }
  }
}

/**
 * 添加item
 */
function addItemByDraft(item: any) {
  titleIndex++;
  state.list.push({
    ...item,
    id: titleIndex.toString(),
    deletable: true,
    title: props.title + titleIndex,
  });
  if (state.list.length === 1) {
    state.list[0].deletable = false;
  } else {
    if (!state.list[0].deletable) {
      state.list[0].deletable = true;
    }
  }
}

function copy(item: any) {
  titleIndex++;
  state.list.push({
    ...item,
    id: titleIndex.toString(),
    deletable: true,
    title: props.title + titleIndex,
  });
  if (state.list.length === 1) {
    state.list[0].deletable = false;
  } else {
    if (!state.list[0].deletable) {
      state.list[0].deletable = true;
    }
  }
}

onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清理数据，当成功页面返回的时候，显示初始状态
    //初始化添加一项
    state.list.splice(0, state.list.length);
    titleIndex = 0;
    if (!props.productList) addItem();
  });
});
/**
 * 暴露list字段给父组件
 */
defineExpose({ list: state.list });
</script>
<template>
  <view class="dynamic-form">
    <!-- item -->
    <view class="dynamic-form__item" v-for="item in state.list" :key="item.id" :item="item">
      <view class="dynamic-form__header">
        <view class="dynamic-form__header--left">{{ item.title }}</view>
        <image :src="COPY" @click="copy(item)" class="dynamic-form__header__image" />
        <app-nut-icon-del2 @click="deleteItem(item.id)" v-if="item.deletable" />
      </view>
      <slot :item="item"></slot>
    </view>
    <!-- 添加button -->
    <nut-button block plain shape="round" type="primary" @click="addItem">
      <template #icon>
        <app-nut-icon-plus />
      </template>
      {{ buttonTitle }}
    </nut-button>
  </view>
</template>
<style lang="scss">
.dynamic-form {
  &__header {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 30px;
    &__image {
      width: 36px;
      height: 36px;
      margin-right: 20px;
    }
    &--left {
      flex: 1;
    }
  }
}
</style>
